<!DOCTYPE html PUBpC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery - jCollapse plugin</title>
<style>
#collapsibleElement {display:none; border:1px solid #000; padding:50px; background-color:#eee;}
.collapsibleMulti {display:none; width:30%; float:left; margin:5px; border:1px solid #000; padding:20px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="jCollapse.js"></script>
<script>
$(document).ready(function(){
    $(".collapse").jCollapse({effect: "fade"});                       
});
</script>
</head>

<body>
<h2>Single Container with an ID</h2>
<a href="#" class="collapse" rel="#collapsibleElement">ExpandZ (with error in spelling which auto corrects itself thanks to our smart plugin)</a>
<div id="collapsibleElement">
	Test Content Number 1
</div>

<h2>Multiple expand/collapse containers (group) with a class</h2>
<a href="#" class="collapse" rel=".collapsibleMulti">Expand</a>
<br clear="all" />
<div class="collapsibleMulti">Something 1</div>
<div class="collapsibleMulti">Something 2</div>
<div class="collapsibleMulti">Something 3</div>
<br clear="all" />
</body>
</html>